<script setup>
const props = defineProps({
  value: {
    type: String,
    default: '',
  },
  list: {
    type: Array,
    default: () => [],
  },
  placeholder: {
    type: String,
    default: '请选择',
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  justShow: {
    type: Boolean,
    default: false,
  },
})

const emit = defineEmits(['change', 'cover-click', 'update:value'])
function handleChange(val) {
  emit('update:value', val.target.value)
  emit('change', val.target.value)
}
function handleClick() {
  // console.log('click')
  emit('cover-click')
}
</script>

<template>
  <div class="select-box">
    <select
      :value="props.value"
      :disabled="props.disabled"
      @change="handleChange"
      :style="{ color: props.value ? '#222' : '#999' }"
    >
      <option value="">{{ props.placeholder }}</option>
      <option
        v-for="(item, index) in props.list"
        :key="index"
        :value="item.value"
      >
        {{ item.name }}
      </option>
    </select>
    <div v-if="props.justShow" class="cover" @click="handleClick"></div>
  </div>
</template>

<style scoped lang="scss">
.select-box {
  width: 100%;
  position: relative;
  select {
    @include wh(100%, 0.36rem);
    border: 1px solid #cccccc;
    border-radius: 0.04rem;
    option {
      color: #222;
    }
  }
  .cover {
    position: absolute;
    left: 0;
    top: 0;
    @include wh(100%, 100%);
    z-index: 9;
  }
}
</style>
